@font-face {
    font-family: "Mona Sans";
    src: url("https://assets.codepen.io/64/Mona-Sans.woff2")
    format("woff2 supports variations"),
    url("https://assets.codepen.io/64/Mona-Sans.woff2")
    format("woff2-variations");
    font-weight: 100 1000;
}

@property --hue {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --rotate {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --bg-y {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --bg-x {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --glow-translate-y {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --bg-size {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --glow-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --glow-blur {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --glow-scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 2;
}

@property --glow-radius {
    syntax: "<number>";
    inherits: true;
    initial-value: 2;
}

@property --white-shadow {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

:root {
    /*// utilities*/
    --debug: 0;
    --supported: 0;
    --not-supported: 0;

    /*// Pen vars*/
    --card-color: hsl(260deg 100% 3%);
    --text-color: hsl(260deg 10% 55%);
    --card-radius: 3.6vw;
    --card-width: 35vw;
    --border-width: 3px;
    --bg-size: 1;

    --hue: 0;
    --hue-speed: 1;

    --rotate: 0;
    --animation-speed: 4s;

    --interaction-speed: 0.55s;
    --glow-scale: 1.5;
    --scale-factor: 1;
    --glow-blur: 6; /*// 6*/
    --glow-opacity: 1; /*// 0.6*/
    --glow-radius: 100; /*// 100*/
    --glow-rotate-unit: 1deg;
}

body::before,
body::after {
    content: "CSS.registerProperty is supported ✅";
    position: absolute;
    display: block;
    top: 8px;
    left: 0;
    right: 0;
    margin: auto;
    width: calc(100% - 160px);
    max-width: 380px;
    height: auto;
    padding: 8px;
    border-radius: 8px;
    background: hsl(114deg 51% 48%);
    color: white;
    text-align: center;
    font-family: sans-serif;
    z-index: var(--supported, 0);
    opacity: var(--supported, 0);
}

body::after {
    content: "CSS.registerProperty is NOT supported ❌";
    background: hsl(0deg 51% 48%);
    z-index: var(--not-supported, 0);
    opacity: var(--not-supported, 0);
}
body::before,
body::after {
    display: none !important;
}

html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

*,
*:before,
*:after {
    outline: calc(var(--debug) * 1px) red dashed;
}

body {
    background-color: var(--card-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Mona Sans", sans-serif;
}

body > div {
    width: var(--card-width);
    width: min(480px, var(--card-width));
    aspect-ratio: 1.5/1;
    color: white;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    border-radius: var(--card-radius);
    cursor: pointer;

    &:hover {
        > div {
            mix-blend-mode: darken;
            --text-color: white;
            box-shadow: 0 0 calc(var(--white-shadow) * 1vw)
            calc(var(--white-shadow) * 0.15vw) rgb(255 255 255 / 20%);
            animation: shadow-pulse calc(var(--animation-speed) * 2) linear infinite;
            &:before {
                --bg-size: 15;
                animation-play-state: paused;
                transition: --bg-size var(--interaction-speed) ease;
            }
        }
        .glow {
            --glow-blur: 1.5;
            --glow-opacity: 0.6;
            --glow-scale: 2.5;
            --glow-radius: 0;
            --rotate: 900;
            --glow-rotate-unit: 0;
            --scale-factor: 1.25;
            animation-play-state: paused;

            &:after {
                --glow-translate-y: 0;
                animation-play-state: paused;
                transition: --glow-translate-y 0s ease, --glow-blur 0.05s ease,
                --glow-opacity 0.05s ease, --glow-scale 0.05s ease,
                --glow-radius 0.05s ease;
            }
        }
    }

    &:before,
    &:after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: var(--card-radius);
    }

    > div {
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--card-color);
        border-radius: calc(calc(var(--card-radius) * 0.9));
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        text-transform: uppercase;
        font-stretch: 150%;
        font-size: 18px;
        font-size: clamp(1.5vw, 1.5vmin, 32px);
        color: var(--text-color);
        padding: calc(var(--card-width) / 8);

        span {
            display: inline-block;
            padding: 0.25em;
            border-radius: 4px;
            background: var(--text-color);
            color: black;
            margin-right: 8px;
            font-weight: 900;
        }

        &:before {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: calc(calc(var(--card-radius) * 0.9));
            box-shadow: 0 0 20px black;
            mix-blend-mode: color-burn;
            z-index: -1;
            background: hsl(0deg 0% 16%)
            radial-gradient(
                    30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%),
                    hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg) 100% 90%)
                    calc(0% * var(--bg-size)),
                    hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg) 100% 80%)
                    calc(20% * var(--bg-size)),
                    hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg) 100% 60%)
                    calc(40% * var(--bg-size)),
                    transparent 100%
            );
            width: calc(100% + var(--border-width));
            height: calc(100% + var(--border-width));
            animation: hue-animation var(--animation-speed) linear infinite,
            rotate-bg var(--animation-speed) linear infinite;
            transition: --bg-size var(--interaction-speed) ease;
        }
    }

    .glow {
        --glow-translate-y: 0;
        display: block;
        position: absolute;
        width: calc(var(--card-width) / 5);
        height: calc(var(--card-width) / 5);
        animation: rotate var(--animation-speed) linear infinite;
        transform: rotateZ(calc(var(--rotate) * var(--glow-rotate-unit)));
        transform-origin: center;
        border-radius: calc(var(--glow-radius) * 10vw);

        &:after {
            content: "";
            display: block;
            z-index: -2;
            filter: blur(calc(var(--glow-blur) * 10px));
            width: 130%;
            height: 130%;
            left: -15%;
            top: -15%;
            background: hsl(
                    calc(calc(var(--hue) * var(--hue-speed)) * 1deg) 100% 60%
            );
            position: relative;
            border-radius: calc(var(--glow-radius) * 10vw);
            animation: hue-animation var(--animation-speed) linear infinite;
            transform: scaleY(calc(var(--glow-scale) * var(--scale-factor) / 1.1))
            scaleX(calc(var(--glow-scale) * var(--scale-factor) * 1.2))
            translateY(calc(var(--glow-translate-y) * 1%));
            opacity: var(--glow-opacity);
        }
    }
}

@keyframes shadow-pulse {
    0%,
    24%,
    46%,
    73%,
    96% {
        --white-shadow: 0.5;
    }
    12%,
    28%,
    41%,
    63%,
    75%,
    82%,
    98% {
        --white-shadow: 2.5;
    }
    6%,
    32%,
    57% {
        --white-shadow: 1.3;
    }
    18%,
    52%,
    88% {
        --white-shadow: 3.5;
    }
}

@keyframes rotate-bg {
    0% {
        --bg-x: 0;
        --bg-y: 0;
    }

    25% {
        --bg-x: 100;
        --bg-y: 0;
    }

    50% {
        --bg-x: 100;
        --bg-y: 100;
    }

    75% {
        --bg-x: 0;
        --bg-y: 100;
    }

    100% {
        --bg-x: 0;
        --bg-y: 0;
    }
}
@keyframes rotate {
    from {
        --rotate: -70;
        --glow-translate-y: -65;
    }

    25% {
        --glow-translate-y: -65;
    }

    50% {
        --glow-translate-y: -65;
    }

    60%,
    75% {
        --glow-translate-y: -65;
    }

    85% {
        --glow-translate-y: -65;
    }

    to {
        --rotate: calc(360 - 70);
        --glow-translate-y: -65;
    }
}
@keyframes hue-animation {
    0% {
        --hue: 0;
    }
    100% {
        --hue: 360;
    }
}
